<template>
  <div class="article-edit">
    <!-- 我的频道 -->
    <div class="my">
      ==={{activeIndex}}
      <van-cell title="我的频道">
        <van-button
          @click="isEdit=!isEdit"
          size="mini"
          round
          plain
          type="warning"
        >{{isEdit?'完成':'编辑'}}</van-button>
      </van-cell>
      <van-grid :gutter="10">
        <!-- 我的频道 -->
        <van-grid-item
          :class="{active:activeIndex==index}"
          v-for="(item, index) in myChannels"
          :key="index"
          @click="mychnBtn(index,item.id)"
        >
          <van-icon class="del-icon" v-show="isEdit" style="" name="cross"/>
          <span>{{item.name}}=={{item.id}}</span>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 频道推荐 -->
    <div class="tuijian">
      <van-cell title="频道推荐"/>
      <van-grid :gutter="10">
        <van-grid-item @click="addpd(tjitem)" v-for="(tjitem, index) in tjChannels" :key="index">
          <span>+</span>
          <span>{{tjitem.name}}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>
           
<script>
import {
  channelsAll_api,
  channelsDel_api,
  channelsAdd_api
} from '@/api/channels.js'
import { SET_TOKEN, GET_TOKEN } from '@/utils/storage.js'
import { mapState } from 'vuex'
export default {
  props: ['myChannels', 'activeIndex'], //  我的频道
  data() {
    return {
      channelsAll: [], //  所有的频道
      isEdit: false,
      defaultChannel:[0,17] //设置允许删除的频道
      // cc:GET_TOKEN('channelsMy')||this.myChannels
    }
  },
  created() {
    this.getchannelsAll()
  },
  methods: {
    // 删除我的频道
    async mychnBtn(index, id) {
      //  isEdit=true===完成
      if (!this.isEdit) {
        //完成
        /* 
        1、将当前点击频道的索引传给导航  并让其显示高亮
        2、关闭遮罩
        */
        this.$emit('father', index, false)
      } else {
        //  编辑
        if(this.defaultChannel.includes(id)){
          alert('不能删')
          return 
        }



        this.myChannels.splice(index, 1)

        /* 持久化 */
        // this.cc=this.myChannels
        // console.log(this.cc,'==========',this.myChannels,888999);
        //  判断当前点击的频道按钮  是当前高亮前面的还是后面的
        if (index <= this.activeIndex) {
          this.$emit('father', index, true)
        }

        //  推荐频道不允许删除


        //  是否登录
        /* 
          登录：
            发送请求   
            发送 ：添加 +  删除
          未登录：
            做本地缓存
        */
        if (this.user) {
          /* 
         
         登录：
            发送请求   
            发送 ：添加 +  删除
         */
          const {data:res} =await channelsDel_api(id)
          console.log(res,555666);
        } else {
          /* 
          未登录：
            做本地缓存*/
          SET_TOKEN('channelsMy', this.myChannels)
        }
      }
    },

    //  添加频道
    async addpd(item) {
      console.log(item, 8899)
      this.myChannels.push(item)

      //  是否登录
      if (this.user) {
        /* 
         
         登录：
            发送请求   
            发送 ：添加 +  删除
         */
         const {data:res} =await channelsAdd_api([
           {
           id:item.id,
           seq:this.myChannels.length
         }
         ])
          console.log(res,555666);
      } else {
        /* 
          未登录：
            做本地缓存*/
        SET_TOKEN('channelsMy', this.myChannels)
      }
    },
    async getchannelsAll() {
      const { data: res } = await channelsAll_api()
      console.log(res, 8899)
      this.channelsAll = res.data.channels //

      //   获取推荐频道

      /* 
             this.channelsAll=[1,2,3,4,5]=={id:1,name:前端}
            this.myChannels=[1,2,5]
            =========3,4
            */
      // var newArr = []
      // this.channelsAll.forEach(item => {
      //   var flag = true
      //   this.myChannels.forEach(item2 => {
      //     if (item2.id == item.id) {
      //       flag = false
      //     }
      //   })
      //   if (flag) {
      //     newArr.push(item)
      //   }
      // })
      // console.log(newArr, 6667777)

      // var newArr = []
      // this.channelsAll.forEach(item => {
      //   var  flag2=this.myChannels.some(item2 =>  item2.id == item.id )
      //   if(!flag2){
      //      newArr.push(item)
      //   }
      // })
      //

      /* 
            
            var arr1=[
                {id:1,name:11},
                {id:2,name:22},
                {id:3,name:33},
                {id:4,name:4},
                {id:5,name:55}
            ]
            var arr2=[
                {id:1,name:11},
                {id:3,name:33}
            ]
            
           结果： ======newArr=[{id:2,name:22},{id:4,name:4},{id:5,name:55}]

            */
    }
  },
  computed: {
    ...mapState(['user']),
    tjChannels() {
      console.log(123)
      var newArr = []
      this.channelsAll.forEach(item => {
        var flag2 = this.myChannels.some(item2 => item2.id == item.id)
        //  some循环汇报满足条件的返回成true   不满足的返回一个false
        if (!flag2) {
          newArr.push(item)
        }
      })
      return newArr
    }
  }
}
</script>
<style scoped lang='less'>
.article-edit {
  .my,
  .tuijian {
    padding-top: 80px;
    /deep/.van-button {
      padding: 10px 20px;
    }
    .van-grid {
      .van-grid-item {
        .del-icon {
          font-size: 10px;
          position: absolute;
          border-radius: 50%;
          background: rgba(0, 0, 0, 0.2);
          top: 0px;
          right: 0px;
          transform: translate(50%, -50%);
        }
        &.active {
          /deep/span {
            color: red;
          }
        }
        /deep/.van-grid-item__content {
          background-color: #eee;
          padding: 22px 0;
          flex-direction: row;
          /deep/span {
            &:nth-child(1) {
              font-size: 25px;
            }
            &:nth-child(2) {
              font-size: 25px;
            }
          }
        }
      }
    }
  }

  .tuijian {
    padding-top: 30px;
  }
}
</style>